<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>预览模板</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" href="engine.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="animate.min.css">
    <link rel="stylesheet" href="element/index.css">
</head>
<body>
    <div id="engine">
        <div :class="['library_item iphone_library',item.seat ==='right' ? 'right':'', item.seat ==='top' ? 'top':'',item.seat ==='bottom' ? 'bottom':'']"
                     v-for="item in data"
                     :key="item.id"
                     :style="'height:'+(item.attr.height/121)+'rem;background:'+(item.attr.background) +
                     ';'+ item.seat + ':'+ item.attr.position/121+ 'rem'">
            <!-- 图片 -->
            <img v-if="item.type.indexOf('img') > -1"
                    :style="'height:'+(item.attr.height/121)+'rem;width:'+item.attr.width+'%;'"
                    :src="item.attr.base64Src">
            <!-- 轮播图 -->
            <el-carousel v-if="item.type.indexOf('swipe') > -1"
                    v-else :height="item.attr.height/121 + 'rem'"
                    :loop="item.attr.loop"
                    :indicator-position="item.attr.indicator"
                    :autoplay="item.attr.autoplay"
                    :type="item.type === 'swipe_card'? 'card' : ''">
                <el-carousel-item
                        v-for="(item, index) in item.attr.base64Src"
                        :key="index">
                    <el-image
                            fit="cover"
                            class="carousel_img"
                            :src="item.src" />
                </el-carousel-item>
            </el-carousel>
            <!-- 表单 -->
            <el-form v-if="item.type.indexOf('form') > -1"
                    ref="ruleForm"
                    class="form_group"
                    label-position="top"
                    label-width="80px"
                    :model="formLabelAlign">
                <el-form-item
                        v-for="(item, index) in item.attr.formList"
                        :key="index"
                        style="color: red"
                        :label="item.title"
                        :prop="item.prop"
                        :rules="item.rules"
                >
                    <el-input v-model="item.value" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="">
                    <el-checkbox v-model="checked">自动输入历史手机号码<span style="color: #3B9AFF;">《个人信息授权与保护声明》</span></el-checkbox>
                </el-form-item>
                <el-form-item class="textCenter">
                    <el-button
                            :style="'background:' + item.attr.button_background +
                                    ';border-color:' + item.attr.button_border_background +
                                    ';border-width:' + item.attr.button_border_width + 'px' +
                                    ';font-size:' + item.attr.font_size_button/121 + 'rem'+
                                    ';color:' + item.attr.color_button +
                                    ';font-weight:' + item.attr.font_weight_button +
                                    ';letter-spacing:' + item.attr.letter_spacing_button + 'px' +
                                    ';width:' + item.attr.button_width + '%' +
                                    ';border-radius:' + item.attr.button_border_radius + 'px' +
                                    ';height:' + item.attr.button_height/121 + 'rem' +
                                    ';margin-top:' + 20/121 + 'rem'"
                                    type="primary"
                                    @click="submitForm('ruleForm')"
                    >{{item.attr.button_text}}</el-button>
                </el-form-item>
            </el-form>
            <!-- 按钮 -->
            <div v-if="item.type.indexOf('button') > -1"
                    :class="['ad_button',item.type === 'buttonTop'? 'button_top': '']">
                <div v-if="item.type === 'button_3'"
                     @click="openUrl(item.attr.hrefUrl)"
                     class="ad_img ad_button_position"
                     :style="'height:'+ item.attr.height/121 + 'rem;line-height:'+ item.attr.height/121 + 'rem;'">
                    <img :src="item.attr.base64Src">
                </div>
                <el-button
                        v-else
                        :class="[item.type === 'button' ? 'button' : 'button_2']"
                        type="primary"
                        @click="openUrl(item.attr.hrefUrl)"
                        :style="'background:' + item.attr.button_background +
                                ';border-color:' + item.attr.button_border_background +
                                ';border-width:' + item.attr.button_border_width + 'px' +
                                ';font-size:' + item.attr.font_size_button/121 + 'rem'+
                                ';color:' + item.attr.color_button +
                                ';font-weight:' + item.attr.font_weight_button +
                                ';letter-spacing:' + item.attr.letter_spacing_button + 'px' +
                                ';width:' + item.attr.button_width + '%' +
                                ';border-radius:' + item.attr.button_border_radius + 'px' +
                                ';height:' + item.attr.button_height/121 + 'rem' +
                                ';line-height:'+ item.attr.height/121 + 'rem;'"
                >{{item.attr.button_text}}</el-button>
            </div>
            <!-- 客服 -->
            <div :class="['kf_group', item.type === 'kf' || item.type === 'kf_1' ? 'textAlign': '']">
                <button
                        v-if="item.type === 'kf'"
                        class="kf"
                        @click="openUrl(item.attr.hrefUrl)"
                        :style="'background:' + item.attr.button_background +
                            ';border-color:' + item.attr.button_border_background +
                            ';border-width:' + item.attr.button_border_width + 'px' +
                            ';font-size:' + item.attr.font_size_button/121 + 'rem'+
                            ';color:' + item.attr.color_button +
                            ';font-weight:' + item.attr.font_weight_button +
                            ';letter-spacing:' + item.attr.letter_spacing_button + 'px' +
                            ';width:' + item.attr.button_width + '%' +
                            ';border-radius:' + item.attr.button_border_radius + 'px' +
                            ';height:' + item.attr.button_height/121 + 'rem'"
                    >{{ item.attr.button_text }}</button>
                <button
                        v-if="item.type === 'kf_1'"
                        class="kf_1"
                        @click="openUrl(item.attr.hrefUrl)"
                        :style="'background:' + item.attr.button_background +
                        ';border-color:' + item.attr.button_border_background +
                        ';border-width:' + item.attr.button_border_width + 'px' +
                        ';font-size:' + item.attr.font_size_button/121 + 'rem'+
                        ';color:' + item.attr.color_button +
                        ';font-weight:' + item.attr.font_weight_button +
                        ';letter-spacing:' + item.attr.letter_spacing_button + 'px' +
                        ';width:' + item.attr.button_width + '%' +
                        ';border-radius:' + item.attr.button_border_radius + 'px' +
                        ';height:' + item.attr.button_height/121 + 'rem'">
                    <span :style="'font-size:' + item.attr.font_size_button/121 + 'rem'" class="iconfont icon-kefu1" />
                    {{ item.attr.button_text }}
                </button>
                <div v-if="item.type === 'kf_2'" class="kf_2">
                    <div v-show="item.attr.message_tip" class="second-triangle-wrapper">
                        <img @click="item.attr.message_tip = false" src="./img/close.png">
                        <div class="title" :style="'color:'+item.attr.kf_tip_title_color+';font-size:'+14/121+'rem'">{{ item.attr.kf_tip_title }}</div>
                        <div class="content" :style="'color:'+item.attr.kf_tip_content_color+';font-size:'+12/121+'rem'">{{ item.attr.kf_tip_content }}</div>
                    </div>
                    <button
                            @click="openUrl(item.attr.hrefUrl)"
                            :style="'background:'+item.attr.background+
                                    ';border:1px solid '+item.attr.background+
                                    ';height:'+70/121+'rem'">
                        <div class="kf_2_right" :style="'color:'+item.attr.kf_text_color">
                            <span :style="'font-size:' + 20/121 + 'rem'" class="iconfont icon-kefu1" />
                            {{ item.attr.kf_text }}
                        </div>
                        <div
                                :class="['online_button', item.attr.animation ? 'animation_shake':'']"
                                :style="'color: '+item.attr.button_text_color +
                                        ';background:'+item.attr.button_background+
                                        ';border-color:'+item.attr.button_border_background+
                                        ';width:'+item.attr.button_width+'px'+
                                        ';height:'+(Number(item.attr.button_height)+10)/121+'rem'+
                                        ';line-height:'+(Number(item.attr.button_height)+10)/121+'rem'+
                                        ';border-style: solid'+
                                        ';border-width:'+item.attr.button_border_width+'px'+
                                        ';border-radius:'+item.attr.button_border_radius+'px'+
                                        ';font-size:'+15/121+'rem'"
                        >
                            {{ item.attr.button_text }}
                            <div v-show="item.attr.message_sum" class="kf_message_num">1</div>
                        </div>
                    </button>
                </div>
                <div v-if="item.type === 'kf_3'" class="kf_3">
                    <div v-show="item.attr.message_tip" class="second-triangle-wrapper">
                        <img @click="item.attr.message_tip = false" src="./img/close.png">
                        <div class="title" :style="'color:'+item.attr.kf_tip_title_color+';font-size:'+14/121+'rem'">{{ item.attr.kf_tip_title }}</div>
                        <div class="content" :style="'color:'+item.attr.kf_tip_content_color+';font-size:'+12/121+'rem'">{{ item.attr.kf_tip_content }}</div>
                    </div>
                    <button @click="openUrl(item.attr.hrefUrl)">
                        <div
                                class="kf_2_right"
                        >
                            <div v-show="item.attr.message_sum" class="kf_message_num">1</div>
                            <img
                                    :style="'border-style:solid;border-width:'+item.attr.button_border_width+'px'+
                                      ';border-color:'+ item.attr.button_border_background+
                                      ';background:'+ item.attr.button_background+
                                      ';border-radius:'+item.attr.button_border_radius+'px'+
                                      ';width:'+40/121+'rem'"
                                    :class="[item.attr.animation ? 'animation_shake':'']"
                                    src="./img/kf_logo.png"
                            >
                        </div>
                        <div
                                class="online_button"
                                :style="'color:'+item.attr.button_color +
                                ';font-size:'+item.attr.button_font_size/121+'rem'"
                        >
                            {{ item.attr.button_text }}
                        </div>
                    </button>
                </div>
                <div v-if="item.type === 'kf_4'" class="kf_4">
                    <div v-show="item.attr.message_tip" class="second-triangle-wrapper">
                        <img @click="item.attr.message_tip = false" src="./img/close.png">
                        <div class="title" :style="'color:'+item.attr.kf_tip_title_color+';font-size:'+14/121+'rem'">{{ item.attr.kf_tip_title }}</div>
                        <div class="content" :style="'color:'+item.attr.kf_tip_content_color">{{ item.attr.kf_tip_content }}</div>
                    </div>
                    <button @click="openUrl(item.attr.hrefUrl)" :style="'background:'+item.attr.background">
                        <div class="kf_2_right">
                            <div
                                    :style="'border-style:solid;background:'+item.attr.button_background +
                                      ';color:'+item.attr.button_color+
                                      ';border-color:'+item.attr.button_border_background+
                                      ';border-width:'+item.attr.button_border_width+'px' +
                                      ';border-radius:'+item.attr.button_border_radius+'px' +
                                      ';border-radius:'+item.attr.button_border_radius+'px' +
                                      ';width:'+(Number(item.attr.width))/121+'rem' +
                                      ';height:'+(Number(item.attr.height)+10)/121+'rem' +
                                      ';line-height:'+(Number(item.attr.height)+10)/121+'rem' +
                                      ';font-size:'+item.attr.button_font_size/121+'rem'"
                                    :class="[item.attr.animation && item.attr.button_item_num === '1' ? 'animation_shake':'', item.attr.message_sum && item.attr.button_item_num === '1' ? 'item_right':'']"
                            >{{ item.attr.button_text_1 }}</div>
                            <div
                                    :style="'border-style:solid;background:'+item.attr.button_background +
                                      ';color:'+item.attr.button_color+
                                      ';border-color:'+item.attr.button_border_background+
                                      ';border-width:'+item.attr.button_border_width+'px' +
                                      ';border-radius:'+item.attr.button_border_radius+'px' +
                                      ';border-radius:'+item.attr.button_border_radius+'px' +
                                      ';width:'+(Number(item.attr.width))/121+'rem' +
                                      ';height:'+(Number(item.attr.height)+10)/121+'rem' +
                                      ';line-height:'+(Number(item.attr.height)+10)/121+'rem' +
                                      ';font-size:'+item.attr.button_font_size/121+'rem'"
                                    :class="[item.attr.animation && item.attr.button_item_num === '2' ? 'animation_shake':'', item.attr.message_sum && item.attr.button_item_num === '2' ? 'item_right':'']"
                            >{{ item.attr.button_text_2 }}</div>
                            <div
                                    :style="'border-style:solid;background:'+item.attr.button_background +
                                      ';color:'+item.attr.button_color+
                                      ';border-color:'+item.attr.button_border_background+
                                      ';border-width:'+item.attr.button_border_width+'px' +
                                      ';border-radius:'+item.attr.button_border_radius+'px' +
                                      ';border-radius:'+item.attr.button_border_radius+'px' +
                                      ';width:'+(Number(item.attr.width))/121+'rem' +
                                      ';height:'+(Number(item.attr.height)+10)/121+'rem' +
                                      ';line-height:'+(Number(item.attr.height)+10)/121+'rem' +
                                      ';font-size:'+item.attr.button_font_size/121+'rem'"
                                    :class="[item.attr.animation && item.attr.button_item_num === '3' ? 'animation_shake':'', item.attr.message_sum && item.attr.button_item_num === '3' ? 'item_right':'']"
                            >{{ item.attr.button_text_3 }}</div>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script src="element/index.js"></script>
<script>
    new Vue({
        el: '#engine',
        data: {
            hhh: '测试http',
            winFont: '20',
            data: [],
            formLabelAlign: {},
            checked: false
        },
        methods: {
            receiveMsg(event) {
                const that = this
                console.log(event.data)
                that.data = event.data
            },
            openUrl(url) {
                if(!url) return
                window.location.href = url
            },
            submitForm(formName) {
                this.$refs[formName][0].validate((valid) => {
                    if (valid) {
                        console.log('submit!')
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        },
        mounted() {
            window.addEventListener('message', this.receiveMsg, false)
        },
    })
</script>
</html>
